<script>
  export let height = "24px";
  export let width = "24px";
  export let isChatBoxOpen = false;
</script>

<div
  class="chat-bot-toggler bg-primary-300 d-flex align-items-center justify-content-center border-radius-4"
>
  {#if !isChatBoxOpen}
    <svg
      width="42"
      height="42"
      viewBox="0 0 42 42"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width="42" height="42" rx="6" fill="#3670F7" />
      <path
        d="M24.903 19.6178C24.9362 19.5928 24.9736 19.5782 25.0137 19.5736L25.8722 19.4759C25.8963 19.4731 25.9083 19.5066 25.8889 19.5225C24.3075 20.8169 23.11 21.7756 21.3784 23.2927C20.8784 23.7308 19.6252 23.8408 19.7647 23.7328C20.9415 22.6034 24.4453 19.9618 24.903 19.6178Z"
        fill="white"
      />
      <path
        d="M24.3772 15.7198C24.9056 15.6173 26.3141 16.1737 26.8419 16.3352C26.9624 16.372 27.1077 16.8654 27.0893 17.0298C27.0876 17.0448 27.0821 17.0586 27.0759 17.0722L26.2063 18.9634C26.2001 18.9769 26.1953 18.9912 26.1902 19.0053C26.157 19.0967 26.0782 19.1608 25.9862 19.1689L25.4505 19.2163C25.4158 19.2194 24.8865 19.2466 24.8865 19.2466C24.8865 19.2466 20.0421 23.0429 19.3906 23.5911C19.3219 23.6489 18.4602 23.762 18.3799 23.7256L15.7904 22.4542C15.5904 22.3638 15.9408 22.2287 16.1436 22.1458L22.8338 19.4133C22.9707 19.3573 23.0297 19.1829 22.9551 19.047C22.5703 18.3463 22.2105 17.8675 21.9946 17.6068C21.8919 17.4828 21.9082 17.284 22.0371 17.1928C22.5677 16.8176 23.8586 15.8204 24.3772 15.7198Z"
        fill="white"
      />
      <path
        d="M10.6609 12.4235L10.2733 11.9267C10.1141 11.7225 10.3107 11.4235 10.5421 11.518L18.3842 14.7207C18.3992 14.7269 18.4136 14.7346 18.4272 14.7438C20.3523 16.0591 21.8877 18.1301 22.3984 18.8645C22.4924 18.9997 22.4376 19.1911 22.2907 19.25L17.0173 21.3649C16.918 21.4047 16.8062 21.3696 16.7422 21.2786L12.8942 15.8017L10.6609 12.4235Z"
        fill="white"
      />
      <path
        d="M26.8093 19.0291C26.6584 19.0239 26.5543 18.8512 26.6189 18.7041L27.1893 17.4051C27.194 17.3943 27.1977 17.383 27.2016 17.3719C27.2517 17.2262 27.4265 17.1843 27.5291 17.294C27.5362 17.3015 27.5421 17.3103 27.5475 17.3194L28.4963 18.9197C28.5634 19.0329 28.4911 19.1663 28.3671 19.1543C27.9828 19.1171 27.2979 19.0457 26.8093 19.0291Z"
        fill="white"
      />
      <path
        d="M17.3199 24.0526C17.3626 23.9277 17.4668 23.7366 17.3558 23.6785L16.2083 23.0611C15.9442 22.9323 15.7406 22.8329 15.5837 22.7564C15.3284 22.6318 14.9205 22.7878 14.7944 23.0576L11.8259 29.4115C11.8161 29.4325 11.8105 29.4543 11.8067 29.4774C11.7523 29.8092 11.2176 31.8258 11.1726 32.0341C11.1685 32.0531 11.1797 32.0342 11.1912 32.0191L17.3199 24.0526Z"
        fill="white"
      />
      <path
        d="M19.083 24.0843C19.1311 24.0269 19.0903 23.9354 19.0186 23.9402L17.7757 24.024C17.7315 24.027 17.6905 24.0495 17.6623 24.0862L14.1508 28.6639C14.1231 28.7 14.1596 28.7493 14.1978 28.7271C14.674 28.4504 16.0497 27.6083 16.9594 26.6149L19.083 24.0843Z"
        fill="white"
      />
      <path
        d="M10 18.0305C10 18.0305 11.899 17.4808 13.8577 18.0272L15.0914 19.4661L16.5355 21.5566L15.7454 21.5933C15.7105 21.5949 15.676 21.5842 15.6473 21.5627L13.8151 20.1911L10 18.0305Z"
        fill="white"
      />
      <path
        d="M21.929 28.9491C22.0742 28.3503 22.9258 28.3503 23.071 28.9491L23.4706 30.5968C23.5224 30.8106 23.6894 30.9776 23.9032 31.0294L25.5509 31.429C26.1497 31.5742 26.1497 32.4258 25.5509 32.571L23.9032 32.9706C23.6894 33.0224 23.5224 33.1894 23.4706 33.4032L23.071 35.0509C22.9258 35.6497 22.0742 35.6497 21.929 35.0509L21.5294 33.4032C21.4776 33.1894 21.3106 33.0224 21.0968 32.9706L19.4491 32.571C18.8503 32.4258 18.8503 31.5742 19.4491 31.429L21.0968 31.0294C21.3106 30.9776 21.4776 30.8106 21.5294 30.5968L21.929 28.9491Z"
        fill="white"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M22.5 29.5863L22.2147 30.763C22.1006 31.2334 21.7334 31.6006 21.263 31.7147L20.0863 32L21.263 32.2853C21.7334 32.3994 22.1006 32.7666 22.2147 33.237L22.5 34.4137L22.7853 33.237C22.8994 32.7666 23.2666 32.3994 23.737 32.2853L24.9137 32L23.737 31.7147C23.2666 31.6006 22.8994 31.2334 22.7853 30.763L22.5 29.5863ZM23.071 28.9491C22.9258 28.3503 22.0742 28.3503 21.929 28.9491L21.5294 30.5968C21.4776 30.8106 21.3106 30.9776 21.0968 31.0294L19.4491 31.429C18.8503 31.5742 18.8503 32.4258 19.4491 32.571L21.0968 32.9706C21.3106 33.0224 21.4776 33.1894 21.5294 33.4032L21.929 35.0509C22.0742 35.6497 22.9258 35.6497 23.071 35.0509L23.4706 33.4032C23.5224 33.1894 23.6894 33.0224 23.9032 32.9706L25.5509 32.571C26.1497 32.4258 26.1497 31.5742 25.5509 31.429L23.9032 31.0294C23.6894 30.9776 23.5224 30.8106 23.4706 30.5968L23.071 28.9491Z"
        fill="white"
      />
      <path
        d="M28.7658 5.07744C28.9525 4.30752 30.0475 4.30752 30.2342 5.07744L30.7479 7.19593C30.8146 7.47082 31.0292 7.68544 31.3041 7.7521L33.4226 8.2658C34.1925 8.4525 34.1925 9.5475 33.4226 9.7342L31.3041 10.2479C31.0292 10.3146 30.8146 10.5292 30.7479 10.8041L30.2342 12.9226C30.0475 13.6925 28.9525 13.6925 28.7658 12.9226L28.2521 10.8041C28.1854 10.5292 27.9708 10.3146 27.6959 10.2479L25.5774 9.7342C24.8075 9.5475 24.8075 8.4525 25.5774 8.2658L27.6959 7.7521C27.9708 7.68544 28.1854 7.47082 28.2521 7.19593L28.7658 5.07744Z"
        fill="white"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M29.5 5.89664L29.1331 7.40957C28.9865 8.01432 28.5143 8.48649 27.9096 8.63314L26.3966 9L27.9096 9.36687C28.5143 9.51351 28.9865 9.98568 29.1331 10.5904L29.5 12.1034L29.8669 10.5904C30.0135 9.98568 30.4857 9.51351 31.0904 9.36687L32.6034 9L31.0904 8.63314C30.4857 8.48649 30.0135 8.01432 29.8669 7.40957L29.5 5.89664ZM30.2342 5.07744C30.0475 4.30752 28.9525 4.30752 28.7658 5.07744L28.2521 7.19593C28.1854 7.47082 27.9708 7.68544 27.6959 7.7521L25.5774 8.2658C24.8075 8.4525 24.8075 9.5475 25.5774 9.7342L27.6959 10.2479C27.9708 10.3146 28.1854 10.5292 28.2521 10.8041L28.7658 12.9226C28.9525 13.6925 30.0475 13.6925 30.2342 12.9226L30.7479 10.8041C30.8146 10.5292 31.0292 10.3146 31.3041 10.2479L33.4226 9.7342C34.1925 9.5475 34.1925 8.4525 33.4226 8.2658L31.3041 7.7521C31.0292 7.68544 30.8146 7.47082 30.7479 7.19593L30.2342 5.07744Z"
        fill="white"
      />
    </svg>
  {:else}
    <svg
      width="46"
      height="46"
      viewBox="0 0 50 50"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g filter="url(#filter0_d_7620_18495)">
        <rect
          x="2.5"
          y="4"
          width="46"
          height="46"
          rx="6"
          fill="#3670F7"
          shape-rendering="crispEdges"
        />
        <path d="M18.625 22.25L25.5 29.125L32.375 22.25H18.625Z" fill="white" />
      </g>
      <defs>
        <filter
          id="filter0_d_7620_18495"
          x="0"
          y="0"
          width="50"
          height="50"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.211765 0 0 0 0 0.439216 0 0 0 0 0.968627 0 0 0 1 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_7620_18495"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_7620_18495"
            result="shape"
          />
        </filter>
      </defs>
    </svg>
  {/if}
</div>

<style>
  .chat-bot-toggler {
    height: 42px;
    width: 42px;
  }
</style>
